<template>
  <div class="container">
    <router-view></router-view>
    <div class="index">
      <Header :isShowMyCourse="true" />
      <div class="main-center2" style="height: auto; margin-bottom: 0px">
        <div class="train-con">
          <div class="train-con-list">
            <div class="t-tit">
              <h3>课程详情</h3>

              <div class="f-back fr" @click="goBack()">
                <img src="static/img/yinyong.png" style="width: 18px; height: 18px" />返回
              </div>
            </div>

            <div class="study-c-info">
              <img class="pic" :src="course.image" />
              <div class="info-txt">
                <h3>{{ course.name }}</h3>
                <p style="margin-top: 26px">{{ course.studynum }}次学习 | 有效期：{{ course.validity }}</p>
                <p class="m-act" style="margin-top: 20px">
                  <label class="fl price">
                    <b v-if="course.payuswitch == 2">￥</b>
                    <span v-if="course.payuswitch == 2">
                      {{
                      course.price
                      }}
                    </span>
                    <span v-else></span>
                  </label>
                  <label
                    class="fr baom"
                    v-if="course.paystatus == 0 && course.payuswitch == 1"
                    style="margin-top: 6px"
                    @click="
                      goName(course.id, course.paystatus, course.payuswitch)
                    "
                  >立即报名</label>
                  <label
                    class="fr baom"
                    v-if="course.paystatus == 0 && course.payuswitch == 2"
                    style="margin-top: 6px"
                    @click="
                      goName(course.id, course.paystatus, course.payuswitch)
                    "
                  >付费报名</label>
                  <label
                    class="fr baom"
                    v-if="course.paystatus == 1"
                    style="margin-top: 6px"
                    @click="goName(course.id, course.paystatus)"
                  >继续学习</label>
                  <!-- <label class=" fr baom cur" v-else>已报名</label> -->
                </p>
              </div>
            </div>
            <div class="courseMainInfo">
              <h3 class="mulu">课程简介</h3>
              <!-- <img
                @click="showMore=!showMore"
                :class="showMore?'':'rotating'"
                src="../../../static/img/top.png"
                alt
              />-->
            </div>
            <div class="MainDetail" :class="showMore?'showMoreDetail':''" v-html="course.content"></div>
            <h3 class="mulu" v-if="course.chapter != undefined">
              课程进度
              <label class="more fr">已完成{{ course.section }}个课时</label>
            </h3>

            <div class="step" v-if="course.chapter != undefined">
              <div class="process" :style="{ width: course.chapter + '%' }"></div>
            </div>
            <div class="clear"></div>
            <div style="display:flex;align-items:center">
              <h5 @click="isActive=0" class="mulu_def" :class="isActive==0?'mulu':''" style="cursor:pointer">课程目录</h5>
              <h5
                @click="isActive=1"
                class="mulu_def"
                :class="isActive==1?'mulu':''"
                style="margin:0 40px;cursor:pointer"
              >课程介绍</h5>
            </div>
            <div v-show="isActive==1" v-html="course.details"></div>
            <ul v-show="isActive==0" class="train-list">
              <li v-for="(item, index) in list" :key="index">
                <img src="static/img/play-v.png" class="pic" @click="goDteail(id, item.id)" />
                <label class="fl-name" @click="goDteail(id, item.id)">
                  {{
                  item.name
                  }}
                </label>
                <label class="fl-time">{{ item.time_total }}</label>
                <label
                  class="fl-file"
                  v-for="(items, indexs) in item.enclosure"
                  :key="indexs"
                  @click="goOpen(item.id, items.key, 1, items.value)"
                >{{ items.name }}</label>
              </li>
              <div class="clear course-file" v-if="course.file.length != 0">
                <h2
                  class="mulu"
                  style="
                    font-weight: normal;
                    font-size: 26px;
                    padding: 10px 0 0 0;
                    
                  "
                >课程附件</h2>
                <li v-for="(item, index) in course.file" :key="index">
                  <img
                    src="static/img/t-list2.png"
                    class="pic"
                    @click="goOpen(course.course_id, item.key, 2, item.value)"
                  />
                  <label
                    class="fl-name"
                    @click="goOpen(course.course_id, item.key, 2, item.value)"
                  >{{ item.name }}</label>
                  <label class="fl-time"></label>
                  <!-- <label class="fl-file">附件</label> -->
                </li>
              </div>
              <li @click="goText()" v-if="course.rexamdata == 1">
                <img src="../../../static/img/zj1-v2.png" class="pic" />
                <label class="fl-name">考试练习</label>
              </li>
            </ul>
          </div>
        </div>

        <div class="r-xcx">
          <span class="sp">微信小程序</span>
          <div class="r-xcx2">
            <h3>培训平台小程序</h3>
            <img width="169" style="margin-top: 26px;" src="/static/img/qr.png" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '../../components/header_train.vue'
import Copyright from '../../components/copyright2.vue'

export default {
  data() {
    return {
      isOpen: true,
      value: [],
      token: localStorage.getItem('token'),
      id: '',
      course: {},
      list: [],
      coures_file: [],
      showMore: false,
      isActive: 0,
    }
  },
  created() {
    this.id = this.$route.query.id
    this.getDetail()
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    //考试练习
    goText() {
      if (this.course.overduestatus == 1) {
        this.$message({
          message: '课程已过期，无法查看',
          type: 'info',
        })
        return
      }
      if (this.course.paystatus == 1) {
        this.$router.push('/test?course_id=' + this.id)
      } else {
        this.$message({
          message: '请先报名',
          type: 'success',
        })
      }
    },
    //打开附件
    goOpen(id, key, type, value) {
      //console.log(this.course)
      if (this.course.overduestatus == 1) {
        this.$message({
          message: '课程已过期，无法查看',
          type: 'info',
        })
        return
      }
      if (this.course.paystatus == 0) {
        this.$message({
          message: '请先报名',
          type: 'success',
        })
        return
      }
      if (this.course.downstatus == 0) {
        let routerUrl = this.$router.resolve({
          path: '/classPlay',
          query: {
            id: id,
            key: key,
            type: type,
          },
        })
        window.open(routerUrl.href, '_blank')
      } else if (this.course.downstatus == 1) {
        window.open(value)
      }
    },
    //去学习
    goDteail(id, classid) {
      if (this.course.overduestatus == 1) {
        this.$message({
          message: '课程已过期，无法查看',
          type: 'info',
        })
        return
      }
      if (this.course.paystatus == 1) {
        this.$api('getCourseList.checkstudyorder', {
          token: this.token,
          course_id: id.toString(),
          content_id: classid.toString(),
        }).then((res) => {
          if (res.data.status == 0) {
            this.$message({
              message: '请按顺序播放视频',
              type: 'info',
            })
            return
          } else {
            this.$router.push('/trainplay?id=' + id + '&classid=' + classid)
          }
        })
      } else {
        this.$message({
          message: '请先报名',
          type: 'info',
        })
      }
    },
    getDetail() {
      this.$api('getCourseList.getUserStudyInfo', {
        token: this.token,
        course_id: this.id,
      }).then((res) => {
        this.course = res.data.course
        this.list = res.data.list
        this.coures_file = res.data.course.file
        //console.log(this.coures_file)
      })
    },
    //报名,id.是否报名0 1，是否付费1
    goName(id, paystatus, pay) {
      if (this.course.overduestatus == 1) {
        this.$message({
          message: '课程已过期，无法查看',
          type: 'info',
        })
        return
      }
      if (paystatus == 0 && pay == 1) {
        this.$api('getCourseList.addUserStudySign', {
          token: this.token,
          course_id: id,
        }).then((res) => {
          if (res.code == 1) {
            this.$message({
              message: res.msg,
              type: 'success',
            })
            this.getDetail()
          }
        })
      } else if (paystatus == 0 && pay == 2) {
        this.$router.push('/trainpay2?id=' + this.id)
      } else if (paystatus == 1) {
        this.$router.push(
          '/trainplay?id=' + this.id + '&classid=' + 'undefined'
        )
      }

      // this.$api('getCourseList.addUserStudySign', { token: this.token, course_id: id }).then(res => {
      //   if (res.code == 1) {
      //     this.$message({
      //       message: res.msg,
      //       type: 'success'
      //     });
      //     this.getDetail();
      //   }
      // });
    },
    goNext() {
      this.$router.push('/trainstudy')
    },
    goCourse() {
      this.$router.push('/courseList')
    },
    goCollect() {
      this.$router.push('/courseCollect')
    },
  },
  components: {
    Header,
    Copyright,
  },
}
</script>

<style lang="scss" scoped>
/deep/ .el-input__inner {
  height: 36px;
  line-height: 35px;
  outline: 0;
}
.MainDetail {
  // height: 100px;
  padding-bottom: 12px;
  overflow: hidden;
}
.showMoreDetail {
  overflow: inherit !important;
  height: auto;
}
.courseMainInfo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  img {
    width: 48px;
    height: 48px;
    cursor: pointer;
  }
}
.rotating {
  transform: rotate(180deg);
}
.mulu{
  padding: 10px 0;
}
.train-list li{
  margin-top: 10px;
}
</style>
